<template>
  <div class="mv-container">
    <div class="mv-wrap">
      <h3 class="title">mv详情</h3>
      <!-- mv -->
      <div class="video-wrap">
        <video controls
               :src="url"></video>
      </div>
      <!-- mv信息 -->
      <div class="info-wrap">
        <div class="singer-info">
          <div class="avatar-wrap">
            <!-- 歌手头像 -->
            <img :src="icon"
                 alt="" />
          </div>
          <!-- 歌手名 -->
          <span class="name">{{mvInfo.artistName}}</span>
        </div>
        <div class="mv-info">
          <!-- 标题 -->
          <h2 class="title">{{mvInfo.name}}</h2>
          <span class="date">发布：2014-11-04</span>
          <!-- 播放次数 -->
          <span class="number">播放：{{mvInfo.playCount}}次</span>
          <!-- 描述 -->
          <p class="desc">{{mvInfo.desc}}</p>
        </div>
      </div>
      <!-- 精彩评论 -->
      <div class="comment-wrap">
        <p class="title">精彩评论<span class="number">({{hotCount}})</span></p>
        <div class="comments-wrap">
          <div class="item"
               v-for="(item,i) in hotComment"
               :key="i">
            <div class="icon-wrap">
              <!-- 头像 -->
              <img :src="item.user.avatarUrl"
                   alt="" />
            </div>
            <div class="content-wrap">
              <div class="content">
                <!-- 昵称 -->
                <span class="name">{{item.user.nickname}}：</span>
                <!-- 评论内容 -->
                <span class="comment">{{item.content}}</span>
              </div>
              <div class="re-content"
                   v-if="item.beReplied.length!=0">
                <span class="name">{{item.beReplied[0].user.nickname}}：</span>
                <span class="comment">{{item.beReplied[0].content}}</span>
              </div>
              <div class="date">2020-02-12 17:26:11</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 最新评论 -->
      <div class="comment-wrap">
        <p class="title">最新评论<span class="number">({{total}})</span></p>
        <div class="comments-wrap">
          <div class="item"
               v-for="(item,i) in comments"
               :key="i">
            <div class="icon-wrap">
              <img :src="item.user.avatarUrl"
                   alt="" />
            </div>
            <div class="content-wrap">
              <div class="content">
                <span class="name">{{item.user.nickname}}：</span>
                <span class="comment">{{item.content}}</span>
              </div>
              <div class="re-content"
                   v-if="item.beReplied.length != 0">
                <span class="name">{{item.beReplied[0].user.nickname}}：</span>
                <span class="comment">{{item.beReplied[0].content}}</span>
              </div>
              <div class="date">2020-02-12 17:26:11</div>
            </div>
          </div>
        </div>
      </div>
      <!-- 分页器 -->
      <el-pagination @current-change="handleCurrentChange"
                     background
                     layout="prev, pager, next"
                     :total="total"
                     :current-page="page"
                     :page-size="5"
                     :limit="limit">
      </el-pagination>
    </div>
    <!-- 相关推荐 -->
    <div class="mv-recommend">
      <h3 class="title">相关推荐</h3>
      <div class="mvs">
        <div class="items">
          <div class="item"
               v-for="(item,i) in simmvs"
               :key="i"
               @click="tomvsmore(item.id)">
            <div class="img-wrap">
              <img :src="item.cover"
                   alt="" />
              <span class="iconfont icon-play el-icon-video-camera"></span>
              <div class="num-wrap">
                <div class="iconfont icon-play"></div>
                <div class="num">{{item.playCount}}</div>
              </div>
              <span class="time">{{item.duration}}</span>
            </div>
            <div class="info-wrap">
              <div class="name">{{item.name}}</div>
              <div class="singer">{{item.artistName}}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'mv',
  data () {
    return {
      // 总条数
      total: 20,
      // 页码
      page: 1,
      // 页容量
      limit: 10,
      // mv地址
      url: '',
      // mv相关推荐
      simmvs: [],
      // mv的信息
      mvInfo: {},
      // 歌手头像
      icon: '',
      // 评论
      hotComment: [],
      // 热门评论的个数
      hotCount: 0,
      // 普通评论
      comments: [],
      offset: 0
    };
  },
  created () {
    // mv地址
    this.mvData()
    // 相关mv
    this.aboutMVData()
    // 获取mv的信息
    this.mvSomeData()
    // 获取评论的数据
    this.commentData()
  },
  methods: {
    // 获取mv的数据
    mvData () {
      axios({
        url: 'https://autumnfish.cn/mv/url',
        methods: 'get',
        params: {
          //  获取url中的id
          id: this.$route.query.q
        }
      }).then(res => {
        // console.log(res);
        this.url = res.data.data.url
      })
    },
    // 相关mv的数据
    aboutMVData () {
      axios({
        url: 'https://autumnfish.cn/simi/mv',
        methods: 'get',
        params: {
          //  获取url中的id
          mvid: this.$route.query.q
        }
      }).then(res => {
        // console.log(res);
        // 保存相关mv
        this.simmvs = res.data.mvs
      })
    },

    // mv的信息
    mvSomeData () {
      axios({
        url: 'https://autumnfish.cn/mv/detail',
        methods: 'get',
        params: {
          //  获取url中的id
          mvid: this.$route.query.q
        }
      }).then(res => {
        // console.log(res);
        // mv信息
        this.mvInfo = res.data.data
        // 歌手信息
        axios({
          url: 'https://autumnfish.cn/artists',
          methods: 'get',
          params: {
            id: this.mvInfo.artists[0].id
          }
        }).then(res => {
          // console.log(res);
          // 歌手的封面信息
          this.icon = res.data.artist.picUrl
        })
      })
    },

    // 获取评论的数据
    commentData () {
      axios({
        url: 'https://autumnfish.cn/comment/mv',
        methods: 'get',
        params: {
          //  获取url中的id
          id: this.$route.query.q,
          limit: 10,
          offset: (this.page - 1) * 10
        }
      }).then(res => {
        // console.log(res);
        this.hotCount = res.data.total
        this.hotComment = res.data.hotComments
        this.comments = res.data.comments
        this.total = res.data.total
      })
    },

    // 点击推荐的mv跳转
    tomvsmore (id) {
      this.$router.push(`/mv?q=${id}`)
      // mv地址
      this.mvData()
      // 相关mv
      this.aboutMVData()
      // 获取mv的信息
      this.mvSomeData()
      // 获取评论的数据
      this.commentData()
    },
    // 点击页码改变
    handleCurrentChange (val) {
      this.page = val
      // console.log(`当前页: ${val}`);
    }
  }
};
</script>

<style></style>
